<template>
	<view class="modal-box">
		<u-transition :show="show" mode="fade" :duration="300">
			<u-modal :show="show" :title="title" :showCancelButton="false" :showConfirmButton="false"
				:closeOnClickOverlay="true" @close="close">
				<view class="content">
					<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
						<u-form-item :label="getStr('my.releaseAds.buy.selectCards')" prop="cards">
							<u-input v-model="tradeCard.zhName" disabledColor="#262930"
								:placeholder="getStr('my.releaseAds.buy.selectCards.placeholder')" color="#ffffff"
								placeholderStyle="color:#666666" border="none">
								<template #suffix>
									<view>
										<!-- <image @click="()=>{appCardTypeShow = true;getAppCardTypeListFn()}" src="/static/images1/index/select-icon.png"
											style="width: 24rpx; height: 24rpx;"></image> -->
											<image @click="goPage('/pages/my/myBag/index?source=trade&cardInfo='+ JSON.stringify(data))" src="/static/images1/index/select-icon.png"
												style="width: 24rpx; height: 24rpx;"></image>
									</view>
								</template>
							</u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="btn-box">
					<view>
						<u-button customStyle="border-radius:12rpx" text="取消"
							color="linear-gradient(90deg, #b5b5b5 0%, #ffd5dd 100%)" @click="close"></u-button>
					</view>
					<view>
						<sysButton :text="confirmText" :handleChange="confirm"></sysButton>
					</view>
				</view>

				<!-- <u-icon name="close-circle-fill" size="34" color="#ffffff" @click="close"></u-icon> -->
			</u-modal>
		</u-transition>

		<view class="action-sheet-box">
			<up-action-sheet :actions="appCardTypeList" :title="getStr('sheet.title.selectCard')" :show="appCardTypeShow"
				@select="handleSelectCard" @close="appCardTypeShow = false"></up-action-sheet>
		</view>
	</view>
</template>

<script>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		getAppCardTypeList
	} from '@/common/api/common.js'
	export default {
		components: {
			sysButton
		},
		props: {
			show: {
				type: Boolean,
				defaultValue: false
			},
			title: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default: ''
			},
			describe: {
				type: String,
				default: ''
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			closeText: {
				type: String,
				default: '取消'
			},
		},
		data() {
			return {
				isRender:true,
				appCardTypeList:[],
				appCardTypeShow:false,
				formData: {
					cardType: {
						cardType: ''
					}
				},
				tradeCard:{}
			}
		},
		watch:{
			show(newVal,oldVal){
				console.log(newVal)
				if(newVal){
					console.log(uni.getStorageSync('tradeCard'),11122)
					if(uni.getStorageSync('tradeCard')){
						this.tradeCard = uni.getStorageSync('tradeCard').card
					}
				}
			}
		},
		onShow(){
			console.log(uni.getStorageSync('tradeCard'),22211)
		},
		methods: {
			async getAppCardTypeListFn(){
				const res = await getAppCardTypeList()
				if (res.code == 200) {
					this.appCardTypeList = res.data.map(item => {
						return {
							...item,
							name:item.cardType
						}
					})
				}
			},
			handleSelectCard(e){
				console.log(e)
				this.formData.cardType = e
				this.formData.cardGrowthRate = e.cardGrowthRate * 100 + '%'
			},
			goPage(url){
				uni.navigateTo({
					url: url
				})
			},
			getStr(key){
				return uni.$t(key)
			},
			setIsRender(){
				this.isRender = false
				setTimeout(() => {
					this.isRender  = true
				}, 50)
			},
			close() {
				this.tradeCard = {}
				this.$emit('close');
			},
			confirm() {
				this.$emit('confirm', true);
				this.close()
			}
		},
		options: {
			styleIsolation: 'shared'
		}
	}
</script>

<style lang="scss" scoped>
	.modal-box {
		::v-deep .u-popup__content {
			background-color: #1C1E23;
			border-radius: 12rpx !important;
			overflow: inherit !important;
		}

		::v-deep .u-modal__title {
			color: #ffffff;
		}

		::v-deep .u-modal__content {
			display: block !important;
			padding-top: 0 !important;
		}

		.content {
			width: 100%;
			display: block;
			text-align: center;
			padding: 40rpx 0;

			.text {
				font-weight: bold;
				font-size: 48rpx;
				color: #ffffff;
			}

			::v-deep .u-form-item {
				margin-bottom: 20rpx;

				text {}
			}

			::v-deep .u-form-item__body__left {
				margin-bottom: 24rpx;
			}

			::v-deep .u-form-item {
				margin-bottom: 0;
			}

			::v-deep .u-form-item__body {
				padding: 0 0 0;
			}

			::v-deep .u-input {
				background-color: #262930;
				height: 88rpx;
				padding: 0 18rpx 0 28rpx !important;
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}

		::v-deep .u-icon {
			position: absolute;
			bottom: -100rpx;
			left: calc(50% - 17px);
		}
		
		
		.action-sheet-box {
			
			::v-deep .u-icon {
				position: absolute;
				bottom: auto;
				left: calc(50% - 17px);
			}
			
			::v-deep .u-popup__content {
				background-color: #1C1E23;
				border-top-left-radius: 30rpx !important;
				border-top-right-radius: 30rpx !important;
			}
		
			::v-deep .u-action-sheet--hover {
				background-color: #1C1E23;
			}
		
			::v-deep .u-action-sheet__header__title {
				color: #fff;
			}
		
			::v-deep .u-action-sheet__item-wrap__item__name {
				color: #fff;
			}
		}
	}

	.btn-box {
		display: flex;
		justify-content: space-between;

		view {
			width: calc(50% - 10rpx);
		}

		::v-deep .u-button {
			height: 88rpx;
		}
	}

	
</style>